<template>
	<view style="background-color: #e5e5e5;">
		
		<view class="heads">
			<u-row gutter="12"  class="header">  
				<u-col span="5">
					<image class="user-images" src="/static/aidex/images/truck.png"></image>
					流水号：{{carInfo.lsh}}
				</u-col>
				<u-col span="7" style="text-align: right;">
					<span>
						<u-icon name="account"></u-icon>
						{{carInfo.nickname}}
					</span>
					<span style="margin-left: 15rpx;">
						<u-icon name="calendar"></u-icon>
						{{$u.timeFormat(carInfo.createtime, 'yyyy年mm月dd日')}}
					</span>
					
				</u-col>	
			</u-row>
		</view>

<view class="mytabs">
		<u-tabs 
		:list="photos" 
		name="categoryTitle" 
		:is-scroll="false"
		:bold="true"
		:current="current" 
		@change="change"></u-tabs>
	</view>
	
	
<view v-for="(items,i) in photos" v-if="current==i">
	<view v-for="(item,p) in items.items" class="editor" >
		<view class="showTitle">{{p+1}}.{{item.categoryTitle}}</view>
		<u-row gutter="16">
			<u-col span="6"  v-for="(sp,na) in item.photos">
				<view class="showImg">
					<u-image :src="sp.thumbFileUrl" mode="widthFix" :fade="true" duration="450" @click="imgPreview(na,item.photos)">
						<u-loading slot="loading"></u-loading>
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u-image>
				</view>
				
			</u-col>	
		</u-row>
	</view>
	
</view>
<!-- 		<view v-for="(itemC,q) in constData" class="editor">	


			<view class=showTitle>{{q+1}}.{{itemC.title}}</view>
				<u-row gutter="16" v-for="(item) in photos" v-if="itemC.values===item.title">
					<u-col span="6"  v-for="(p,i) in item.photos">
						<view class="showImg">
							<u-image :src="p.thumbFileUrl" mode="widthFix" :fade="true" duration="450" @click="imgPreview(i)">
								<u-loading slot="loading"></u-loading>
								<view slot="error" style="font-size: 24rpx;">加载失败</view>
							</u-image>
						</view>
						
					</u-col>	
				</u-row>

				 -->
		</view>	
	</view>
</template>

<script>
import constData from "@/common/constantdata.js"
	export default {
		data() {
			return {
				constData,
				carInfo: [],
				fileList1: [],
				photos: [],
				phoArr: [],
				current: 0,
			}
		},
		methods: {
			change(index) {
							this.current = index;
						},
			imgPreview(n,photos) {
				console.log(photos)
				var urls=new Array();
				for (var i = 0; i < photos.length; i++) {
					urls.push(photos[i].url)
				}
				uni.previewImage({
					current:n,//为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
					indicator: "default",//图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。
					loop: true,
					urls: urls,

				})
			},
			getCarInfo(id) {
				var phoArr = new Array();
				this.$u.api.energy.getCars({
						id: id
					})
					.then(res => {
						console.log(res)
						
						var photoArr = new Array();
						
						this.carInfo = res.data
						
						this.photos = JSON.parse(res.data.photos)
						console.log(this.photos)
					});

			}
		},
		created() {

		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数

			this.getCarInfo(option.id)
		}
	}
</script>

<style scoped lang="scss">
	.mytabs{
		margin-top: 15rpx;
		padding: 25rpx;
	}
	.showImg {
		border-radius: 10rpx;
		border: 1px solid #e5e5e5;
		padding: 4rpx;
		box-shadow: 5px 5px 5px #d5d5d66b;
		width:98%;
		margin: 5rpx;
	}

	.showTitle {
		margin: 15rpx 0;
		color: $u-main-color;
		font-size: 30rpx;
	}

	.heads {
		background-color: #fff;
		margin: -5rpx 25rpx 5rpx 25rpx;
		padding: 15rpx;
		display: flex;
		color: #999;

		.header {
			font-size: 20rpx;
			width: 100%;
			// border: 2px solid #999;
			// padding: 5px;
			// font-size: 10rpx;
			// font-weight: bold;
			// border-radius: 5rpx;
			// background-color: #e5e5e5;
		}

		.jsh {
			margin-left: 20rpx;
			font-weight: bold;
		}
	}

	.editor {
		background-color: #fff;
		margin: 15rpx 25rpx 5rpx 25rpx;
		padding: 15rpx;
	}
	.user-images{
		width: 28px;
		height:28px;
		margin-right: 8px;
		margin-bottom: -8px;
	}
	.u-icon{
		background: #c3e9e5;
		width: 28px;
		height: 28px;
		border-radius: 14px;
		text-align: center;
		padding: 0 0 2px 5px;
		margin-right: 6rpx;
		color:#2ac2b8;
	}
	    
</style>
